<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

    <title>Search</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/search.css" rel="stylesheet">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="tag-it-master/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
    <link href="tag-it-master/css/jquery.tagit.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
        $(document)
            .ready(
                function () {

                    var locationArray = new Array();

                    $.ajax({
                        type: "GET",
                        url: "GetLocations",
                        dataType: "json",
                        data: {
                            query: ""
                        },
                        success: function (data) {
                            $.map(data.results, function (item) {
                                locationArray.push(item);
                            });
                        }
                    });

                    $('#wait-image').hide();

                    $('#locationInput').autocomplete({
                        source: locationArray
                    });

                    $('#searchstory')
                        .submit(
                            function () {

                                var url = "Search"; // the script where you handle the form input.
                                $('#results-scrollbar').html('');
                                $
                                    .ajax({
                                        type: "GET",
                                        url: url,
                                        dataType: "json",
                                        beforeSend: function () {
                                            $('#wait-image')
                                                .show();
                                        },
                                        data: $(
                                            "#searchstory :input[value!='']")
                                            .serialize(),
                                        success: function (data) {
                                        	var counter = 0;
                                            $
                                                .map(
                                                    data.searchResults,
                                                    function (
                                                        item) {
                                                        $(
                                                            '#results-scrollbar')
                                                            .append(
                                                                '<h5><a href="ReadStory?story_id=' +
                                                                item.s_id + '">' + item.title +
                                                                ' by ' + item.user + '</a></h5>' +
                                                                '<p style="font-size:small">' + item.summary +
                                                                '</p>' +
                                                                '<p style="font-size:small">Rating: ' +
                                                                item.avgRating + '</p>' +
                                                                '<p style="font-size:small">' + item.tags +
                                                                '</p>' + '<hr>');
                                                        counter++;

                                                    });
                                            $('#wait-image')
                                                .hide();
                                            if(counter==0){
                                            	$(
                                                '#results-scrollbar')
                                                .append(
                                                	'<h5>No results found</h5>'		
                                                );
                                            }
                                        }
                                    });
                                return false; // avoid to execute the actual submit of the form.
                            });

                    $(function () {
                        $("#keywordsInput").tagit({
                            allowSpaces: true,
                            fieldName: 'keywords',
                            placeholderText: 'Enter Keywords',
                            tagSource: function (request, response) {
                                $.ajax({
                                    url: "GetKeywords",
                                    dataType: "json",
                                    data: {
                                        query: request.term
                                    },
                                    success: function (data) {
                                        response($.map(data.results, function (item) {
                                            return {
                                                label: item,
                                                value: item
                                            };
                                        }));
                                    }
                                });
                            }
                        });
                    });
                });
    </script>

</head>

<body background="img/back_nologo.png">
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>
                </button>
                <img src="img/logo_writing.png" id="top_logo">
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="MainPage">Home Page</a>
                    </li>
                    <li><a href="GetRecommendations">Recommendations</a>
                    </li>
                    <li class="active"><a href="Search.jsp">Search Stories</a>
                    </li>
                    <li><a href="GetFollowers">Following</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav" id="profile_buttons">
                    <li><a href="GetProfile">My Profile</a>
                    </li>
                    <li><a href="Logout">Logout</a>
                    </li>
                </ul>
            </div>
            <!-- /.nav-collapse -->
        </div>
        <!-- /.container -->
    </div>
    <!-- /.navbar -->

    <div class="container">
        <div class="jumbotron" id="search-container">
            <center>
                <h1>Search Story</h1>
            </center>
            <div class="row">
                <div class="col-lg-6">
                    <form id="searchstory" action="">
                        <label for="locationInput">Location:</label>
                        <input type="text" name="location" class="form-control" id="locationInput" placeholder="Enter a location...">
                        <label for="keywordsInput">Keywords:</label>
                        <input type="text" name="keywords" class="form-control" id="keywordsInput" placeholder="Enter keywords seperated with comma...">
                        <label for="dateInput">Date:</label>
                        <input type="date" name="date" class="form-control" id="dateInput">
                        <button class="btn btn-primary" id="search-button" type="submit">Search</button>
                    </form>
                </div>
                <div class="col-lg-6">
                    <div class="well sidebar-nav" id="results-container">
                        <center>
                            <h2>Results</h2>
                        </center>
                        <center>
                            <img src="img/ajax-loader.gif" id="wait-image">
                        </center>
                        <div id="results-scrollbar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
